<template>
  <div class="weather">
    <div class="search">
      <input type="search" placeholder="搜索地址" v-model="city">
      <span class="iconfont icon-sousuo"></span>
      <button id="search" @click="sousuo">搜索</button>
      <span class="location">当前城市:{{weatherdata.city}}</span>
    </div>
    <div class="day1">
      <img :src="require('@/assets/imgs/'+day1_img)" alt="" class="weather_img">
      <!-- <img :src="require(`@/assets/imgs/${day1_img}`)" alt="" class="weather_img"> -->
      <div class="weather_detail1">
        <p>{{day1.nighttemp_float}}℃-{{day1.daytemp_float}}℃</p>
        <p>{{day1.dayweather}}转{{day1.nightweather}}</p>
        <p>{{day1.daywind}}风{{day1.daypower}}级</p>
        <p>{{day1.date}}</p>
        <p>星期{{day1.week}}</p>
      </div>
      <div class="jintian">今天</div>
    </div>
    <div class="day2">
      <img :src="require('@/assets/imgs/'+day2_img)" alt="" class="weather_img">
      <div class="weather_detail2">
        <p>{{day2.nighttemp_float}}℃-{{day2.daytemp_float}}℃</p>
        <p>{{day2.dayweather}}转{{day2.nightweather}}</p>
        <p>{{day2.daywind}}风{{day2.daypower}}级</p>
        <p>{{day2.date}}</p>
        <p>星期{{day2.week}}</p>
      </div>
    </div>
    <div class="day3">
      <img :src="require('@/assets/imgs/'+day3_img)" alt="" class="weather_img">
      <div class="weather_detail2">
        <p>{{day3.nighttemp_float}}℃-{{day3.daytemp_float}}℃</p>
        <p>{{day3.dayweather}}转{{day3.nightweather}}</p>
        <p>{{day3.daywind}}风{{day3.daypower}}级</p>
        <p>{{day3.date}}</p>
        <p>星期{{day3.week}}</p>
      </div>
    </div>
    <div class="day4">
      <img :src="require('@/assets/imgs/'+day4_img)" alt="" class="weather_img">
      <div class="weather_detail2">
        <p>{{day4.nighttemp_float}}℃-{{day4.daytemp_float}}℃</p>
        <p>{{day4.dayweather}}转{{day4.nightweather}}</p>
        <p>{{day4.daywind}}风{{day4.daypower}}级</p>
        <p>{{day4.date}}</p>
        <p>星期{{day4.week}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import "../assets/icon/iconfont.css"
  // 1.导入axios
  import axios from 'axios'

  export default {
    name: 'Wea-Ther',
    data() {
      return {
        city: '合肥',
        weatherdata: [],
        day1: {},
        day1_img: '',
        day2: {},
        day2_img: '',
        day3: {},
        day3_img: '',
        day4: {},
        day4_img: '',

      }
    },

    methods: {
      async sousuo() {
        try {
          let res = await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=bef62f14f8c63796006d20bac8e9d076&city=${this.city}&extensions=all`, true)
          this.weatherdata = res.data.forecasts[0]
          this.day1 = this.weatherdata.casts[0]
          this.day2 = this.weatherdata.casts[1]
          this.day3 = this.weatherdata.casts[2]
          this.day4 = this.weatherdata.casts[3]

          if (this.day1.dayweather == '晴') {
            this.day1_img = '晴天.png';
          } else if (this.day1.dayweather == '多云') {
            this.day1_img = '浓云.png';
          } else if (this.day1.dayweather == '阴') {
            this.day1_img = '阴天.png';
          } else {
            this.day1_img = '下雨.png';
          }
          if (this.day2.dayweather == '晴') {
            this.day2_img = '晴天.png';
          } else if (this.day2.dayweather == '多云') {
            this.day2_img = '浓云.png';
          } else if (this.day2.dayweather == '阴') {
            this.day2_img = '阴天.png';
          } else {
            this.day2_img = '下雨.png';
          }
          if (this.day3.dayweather == '晴') {
            this.day3_img = '晴天.png';
          } else if (this.day3.dayweather == '多云') {
            this.day3_img = '浓云.png';
          } else if (this.day3.dayweather == '阴') {
            this.day3_img = '阴天.png';
          } else {
            this.day3_img = '下雨.png';
          }
          if (this.day4.dayweather == '晴') {
            this.day4_img = '晴天.png';
          } else if (this.day4.dayweather == '多云') {
            this.day4_img = '浓云.png';
          } else if (this.day4.dayweather == '阴') {
            this.day4_img = '阴天.png';
          } else {
            this.day4_img = '下雨.png';
          }
          console.log(this.day1_img, this.day2_img, this.day3_img, this.day4_img)
        } catch (error) {
          console.log(error.message);
        }
      }
    },
    created() {
      axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=bef62f14f8c63796006d20bac8e9d076&city=${this.city}&extensions=all`, true).then(
        (res) => {
          this.weatherdata = res.data.forecasts[0]
          this.day1 = this.weatherdata.casts[0]
          this.day2 = this.weatherdata.casts[1]
          this.day3 = this.weatherdata.casts[2]
          this.day4 = this.weatherdata.casts[3]

          if (this.day1.dayweather == '晴') {
            this.day1_img = '晴天.png';
          } else if (this.day1.dayweather == '多云') {
            this.day1_img = '浓云.png';
          } else if (this.day1.dayweather == '阴') {
            this.day1_img = '阴天.png';
          } else {
            this.day1_img = '下雨.png';
          }
          if (this.day2.dayweather == '晴') {
            this.day2_img = '晴天.png';
          } else if (this.day2.dayweather == '多云') {
            this.day2_img = '浓云.png';
          } else if (this.day2.dayweather == '阴') {
            this.day2_img = '阴天.png';
          } else {
            this.day2_img = '下雨.png';
          }
          if (this.day3.dayweather == '晴') {
            this.day3_img = '晴天.png';
          } else if (this.day3.dayweather == '多云') {
            this.day3_img = '浓云.png';
          } else if (this.day3.dayweather == '阴') {
            this.day3_img = '阴天.png';
          } else {
            this.day3_img = '下雨.png';
          }
          if (this.day4.dayweather == '晴') {
            this.day4_img = '晴天.png';
          } else if (this.day4.dayweather == '多云') {
            this.day4_img = '浓云.png';
          } else if (this.day4.dayweather == '阴') {
            this.day4_img = '阴天.png';
          } else {
            this.day4_img = '下雨.png';
          }
          console.log(this.day1_img, this.day2_img, this.day3_img, this.day4_img)
        }
      ).catch((error) => {
        console.log('捕获错误', error.message);
      })
    },
    mounted() {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  * {
    padding: 0px;
    margin: 0px;
    list-style: none;
  }

  .search {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    background-color: #00000044;
  }

  .search input {
    padding-right: 10px;
    margin: 8px 10px 0px 200px;
    display: inline-block;
    width: 200px;
    height: 30px;
    border-radius: 20px;
    background-color: #ffffff86;
    outline: none;
    text-indent: 2.1em;
    color: #535353;
    font-size: 14px;
  }

  .search .icon-sousuo {
    position: absolute;
    top: 17px;
    left: 209px;
    color: #5d5d5d;
    font-size: 16px;
  }

  .search #search {
    position: relative;
    top: 2px;
    width: 60px;
    height: 30px;
    margin-top: 10px;
    padding: 2px;
    border-radius: 15px;
    background-color: #ffffffb7;
    color: #535353;
  }

  .search #search:hover {
    background-color: #ffffff;
    box-shadow: 0px 0px 3px #fff;
  }

  .search .location {
    margin-left: 50px;
    color: #ffffffb0;
  }

  .day1 {
    box-sizing: border-box;
    width: 100%;
    height: 250px;
    padding: 25px;
    background-color: #ffffff41;
  }

  .day1 img {
    float: left;
    margin-left: 110px;
    height: 200px;
    vertical-align: middle;
  }

  .day1 .weather_detail1 {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    float: left;
    margin-left: 60px;
    width: 400px;
    height: 200px;
  }

  .day1 .weather_detail1 p {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #313131;
    font-size: 26px;
  }

  .day1 .jintian {
    float: left;
    width: 100px;
    height: 200px;
    text-align: center;
    font-size: 60px;
    line-height: 90px;
    color: #c75c5c;
  }

  .day2 {
    float: left;
    width: 300px;
    height: 360px;
    background-color: #bae6c52b;
  }

  .day2 img {
    display: block;
    width: 100px;
    height: 100px;
    margin: 20px auto;
  }

  .day2 .weather_detail2 {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    float: left;
    width: 300px;
    height: 220px;
  }

  .day2 .weather_detail2 p {
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #bcbcbc;
    font-size: 26px;
  }

  .day3 {
    float: left;
    margin-left: 90px;
    width: 300px;
    height: 360px;
    background-color: #bae6c52b;
  }

  .day3 img {
    display: block;
    width: 100px;
    height: 100px;
    margin: 20px auto;
  }

  .day3 .weather_detail2 {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    float: left;
    width: 300px;
    height: 220px;
  }

  .day3 .weather_detail2 p {
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #bcbcbc;
    font-size: 26px;
  }

  .day4 {
    float: right;
    width: 300px;
    height: 360px;
    background-color: #bae6c52b;
  }

  .day4 img {
    display: block;
    width: 100px;
    height: 100px;
    margin: 20px auto;
  }

  .day4 .weather_detail2 {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    float: left;
    width: 300px;
    height: 220px;
  }

  .day4 .weather_detail2 p {
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #bcbcbc;
    font-size: 26px;
  }
</style>